<!--公共头部-->
{template 'aitimt/common/header'}
	<style>
		.mui-input-row{overflow: unset;}
		.mui-search input[type=search] {background-color: #EFEFEF;width: 80%;border-radius: 3.125rem;border: 1px #eee solid;height: 35px;}
		.top-slider{z-index: 15;margin-top:15% ;overflow: unset;}
		.top-slider .mui-slider-group .mui-slider-item img{width: 100%;}
		.mui-indicator .mui-active{background-color:#000000;}
		.mui-search .mui-placeholder{color: #595757;line-height: 2.5rem;font-size: 0.9375rem;width: 45%;}
		.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active{color: #585858;border-bottom: 0;}
		.mui-bar-tab .mui-tab-item.mui-active{color: #ea4609;}
		.mui-table-view .mui-media-object{max-width: 40%;}
		.mui-input-row .mui-btn{background-color: #a4a4a4;float: none;border-radius: 13px;color: #fff;padding: 0;height: 35px;}
		.mui-slider{background-color: #ffffff;}
		.mui-slider-indicator.mui-segmented-control .mui-control-item {border-bottom: 1px solid rgba(0,0,0,0.05);line-height: 30px;padding: 1px;color: #585858;}
		.mui-slider .mui-segmented-control.mui-segmented-control-inverted~.mui-slider-group .mui-slider-item{border: 0}
		.mui-slider .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active{color: #585858;}
		.mui-slider .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active:after{content: '';position: absolute;bottom: 0;height: 3px;width: 30%;display: -webkit-box;margin-left: 10%;background-color: #E94709;}
		.mui-table-view-cell:after{height: 0;}
		.mui-ios .mui-table-view-cell img{max-width: 100%;width: 100%;}
		.mui-card{margin: 0;box-shadow:none;}
		.mui-table-view{background-color: #efefef;}
		.mui-input-row .mui-input-clear~.mui-icon-clear{display: none;}
		.mui-scroll{position: unset;padding: 5%;height: 100%}
		.grade-mess{border: 1px solid #e4e4e4}
		.grade-mess tr{border: 1px solid #e4e4e4}
		.grade-mess tr td{border: 1px solid #e4e4e4}
		.report-do{position: fixed!important;width: 100%; bottom: 0;}
		.report-do .mui-tab-item{display: table-cell;overflow: hidden;width: 1%;height: 50px;text-align: center;vertical-align: middle;white-space: nowrap;text-overflow: ellipsis;color: #4e4e4e;}
		.report-do .mui-tab-item .mui-icon {font-size: 24px;position: relative;z-index: 20;top: 3px;width: 24px;height: 24px;padding-top: 0;padding-bottom: 0;}
		.report-do .mui-tab-item .mui-icon~.mui-tab-label {font-size: 11px;display: block;overflow: hidden;text-overflow: ellipsis;}
		.report-do .mui-active{color: #E94709}
	</style>
	<!-- 公共头部start -->
	<header class="mui-bar mui-bar-nav">
		<a class="top-return mui-action-back"><img src="{$aideUrl}app/resource/aitimt/images/return.png" ></a>
		<a class="top-logo"><img src="{$aideUrl}app/resource/aitimt/images/logo.png" ></a>
		<!--公共菜单start -->
		{template 'aitimt/common/menu'}
		<!-- 公共菜单end-->
	</header>
		<div class="mui-content">
			<div id="slider" class="mui-slider">
				<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<a class="mui-control-item mui-active" href="#item1mobile">完赛证书</a>
					<a class="mui-control-item" href="#item2mobile">分段详情</a>
				</div>
				<div class="mui-slider-group" style="background: #ffffff;">
					<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
						<div class="mui-scroll">
							{if !empty($message['report'])}
							<img src="{$message['report']}" style="width: 90%;margin:5% 5% 10% 5%;" alt="">
						</div>
						<div class="report-do" id="report-do">
							<a class="mui-tab-item" id="collect" onclick="collect('report',this)">
								<span class="mui-icon iconfont icon-shoucang"></span>
								<span class="mui-tab-label">收藏</span>
							</a>
							<a class="mui-tab-item" onclick="save(this)">
								<span class="mui-icon iconfont icon-xiazai"></span>
								<span class="mui-tab-label">下载</span>
							</a>
						</div>
						{else}
						<div style="padding-top: 20%;text-align: center;">
							主办方未提供参赛证书

						</div>
						</div>
						{/if}
					</div>
					<div id="item2mobile" class="mui-slider-item mui-control-content">
						<div class="mui-scroll">
							{if $message['type']==6}
							<table class="grade-mess" cellpadding="0" cellspacing="0" width="100%">
								{if $message['netResult']!=[]}
								{loop $message['netResult'] $k $item}
								{if $k==0}
								<tr>
									<td rowspan="{php echo count($message['netResult']);}">净计时成绩</td>
									<td>{$item}</td>
								</tr>
								{else}
								<tr>
									<td >{$item}</td>
								</tr>
								{/if}
								{/loop}
								{/if}
								{if $message['netSection']!=[]}
								{loop $$message['netSection'] $k $item}
								{if $k==0}
								<tr>
									<td rowspan="{php echo count($message['netSection']);}">分段成绩</td>
									<td>{$item}</td>
								</tr>
								{else}
								<tr>
									<td >{$item}</td>
								</tr>
								{/if}
								{/loop}
								{/if}
								{if $message['gunshot']!=[]}
								{loop $message['gunshot'] $k $item}
								{if $k==0}
								<tr>
									<td rowspan="{php echo count($message['gunshot']);}">枪声成绩</td>
									<td>{$item}</td>
								</tr>
								{else}
								<tr>
									<td >{$item}</td>
								</tr>
								{/if}
								{/loop}
								{/if}
							</table>
							{else}
							<table class="grade-mess" cellpadding="0" cellspacing="0" width="100%">
								{if $message['netResult']!=[]}
								{loop $message['netResult'] $k $item}
								{if $k==0}
								<tr>
									<td rowspan="{php echo count($message['netResult']);}">净计时成绩</td>
									<td>{$item}</td>
								</tr>
								{else}
								<tr>
									<td >{$item}</td>
								</tr>
								{/if}
								{/loop}
								{/if}
								{if $message['netSection']!=[]}
								{loop $$message['netSection'] $k $item}
								{if $k==0}
								<tr>
									<td rowspan="{php echo count($message['netSection']);}">分段成绩</td>
									<td>{$item}</td>
								</tr>
								{else}
								<tr>
									<td >{$item}</td>
								</tr>
								{/if}
								{/loop}
								{/if}
								{if $message['gunshot']!=[]}
								{loop $message['gunshot'] $k $item}
								{if $k==0}
								<tr>
									<td rowspan="{php echo count($message['gunshot']);}">枪声成绩</td>
									<td>{$item}</td>
								</tr>
								{else}
								<tr>
									<td >{$item}</td>
								</tr>
								{/if}
								{/loop}
								{/if}
							</table>
							{/if}
						</div>
					</div>

				</div>
			</div>

		</div>
		<!-- 公共底部start -->
		{template 'aitimt/common/nav'}
		<!-- 公共底部end -->
		<script type="text/javascript">
		mui.init({
			swipeBack:false //启用右滑关闭功能
		});
        mui('.mui-slider').slider().stopped = true;
        function save(cc) {
            cc.classList.remove('mui-active');
            mui.toast('长按保存图片');
        }
        function collect(type,cc){
           var src ="{$message['report']}";
            var arr ={img_src:src,type:type};
            $.post("{php echo app_url('home/index/photoshow')}", arr, function(data){
                console.log(data);
                if(data.errno == 0){
                    mui.toast(data.msg);
                    cc.classList.remove('mui-active');
                }else{
                    mui.toast(data.msg);
                }
            },"json");
        }
        var src ="{$message['report']}";
        initStatus(src);
        //初始化点赞，收藏状态
        function initStatus(imgSrc) {
            var collect=document.getElementById('collect');
            $.ajax({
                type: 'post',
                url: "{php echo app_url('home/index/photostatus')}",
                data: {img_src:imgSrc},
                dataType: 'json',
                success: function(data){
                    if (data.report==1){
                        collect.classList.add('mui-active');
                    }else {
                        collect.classList.remove('mui-active');
                    }
                },
                error: function(xhr, type){
                }
            });
        }
		</script>

	</body>

</html>
